<template>
  <div  id="mainScroll">
    <div class="waterfalls" id="wf">
      <div class="com-errorPage" v-if="photos && photos.length==0 && showData" @click="goPhoto">
        <p class="erroricon"><i class="icon icon-nodata"></i></p>
        <p class="errormsg" >您还没有随手拍</p>
      </div>

      <div >
        <div class="logo-box" @click="goPhoto" v-if="photos && photos.length!=0">
        <div class="convphoto-title">随手拍</div>
        <div class="convphoto-subtitle">
        <i class="line"></i>获取城市积分
        <i class="line"></i>
        </div>
        </div>
      </div>

        <div v-for="(item , index) in photos" class="photo-container" :class="{'load':item.load}">
          <div class="img-box"  @click="godetail(item.id)">
            <img  :src="item.photo"   @load="arrange(index)">
          </div>
          <div class="subinfo-box">
          <span class="title" @click="godetail(item.id)" v-text="item.title "></span>
          <span class="vote-box" :class="{'active': item.praised}">
          <i :class="{'vote-icon': true}"></i>
          <i class="vote-num" v-text="item.praiseCount"></i>
          </span>
          </div>
        </div>
    </div>
    <div id="more" data-gap="100"></div>
  </div>
</template>

<script>
    import index from './index2';
    export default index;
</script>


<style lang="less" scoped>
  #more{position: absolute ; top:100%;}
  .waterfalls{
    margin-top: 11px;
    position: relative;
    width: 100%;
  }
  .photo-container{
    position: absolute;
    width: 167px ;
    opacity:0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  .photo-container.load{
    opacity:1;
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: opacity .35s  ;
    -webkit-transition: opacity .35s  ;
    /*animation:showBox .25s .2s forwards;*/
    /*-webkit-animation:showBox .25s .2s forwards;*/
  }
  @keyframes showBox
  {
    from {opacity:0;}
    to {
      opacity:1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @-webkit-keyframes showBox
  {
    from {opacity:0;}
    to {opacity:1;
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  .logo-box {
    position: absolute;
    width: 167px;
    height: 70px;
    right: 15px;
    top: 0;
    background: url('../img/plogo.png') no-repeat center;
    background-size: cover;
}

.convphoto-title {
    margin-top: 14px;
    text-align: center;
    font-family: STHeitiSC-Medium;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.53px;
}

.convphoto-subtitle {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: -0.47px;
    line-height: 18px;
    margin-top: 5px;
    text-align: center;
}

.line {
    display: inline-block;
    width: 16px;
    height: 1px;
    opacity: 0.56;
    background: #FFFFFF;
    vertical-align: middle;
    margin: 0 3px;
}

.img-box {
    line-height: 0;
    // min-height: 100px;
}
  .img-box img {
    background: #fdfdfd;
  }
.subinfo-box {
    font-family: STHeitiSC-Light;
    font-size: 15px;
    color: #000000;
    line-height: 18px;
    margin: 8px 0 14px 0;
    overflow: hidden;
}

.title {
    float: left;
    display: block;
    width: 94px;
    height: 18px;
    overflow: hidden;
}

.vote-box {
    float: right;
    font-size: 0;
    display: block;
}


.vote-box .vote-icon {
    background: url('../img/novote.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-top: -3px;
}

.vote-box.active .vote-icon {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover;
}

.vote-box .vote-num {
    font-size: 14px;
    color: #868686;
     margin-left: 5px;
    vertical-align: middle;
}

.vote-box.active .vote-num {
    color: #DF3031;
}

</style>
